<template>
  <div class="box">
      <el-card class="chartCard">
        <div ref="box" :class="$store.state.menu.isCollapse?'lineChart':'lineChart2'"></div>
      </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { lineOption } from './options'
import { articleApi } from '../../apis/article'
const useArticleApi = articleApi()
export default {
  data () {
    return {
      myChart: '',
      xData: [],
      sData: []
    }
  },
  methods: {
    formatData (array) {
      const tabArr = []
      const seriesArr = []
      for (let i = 0; i < array.length; i++) {
        tabArr.push(array[i].date.split('T')[0])
        seriesArr.push(array[i].count)
      }
      return [tabArr, seriesArr]
    },
    getArticleCount () {
      useArticleApi.getArticleCount().then(res => {
        if (res && res.code === 200) {
          this.xData = this.formatData(res.data)[0]
          this.sData = this.formatData(res.data)[1]
          this.init()
        }
      })
    },
    init () {
      const options = { ...lineOption }
      options.xAxis.data = this.xData
      options.series[0].data = this.sData
      this.myChart.setOption(options)
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.box)
    this.getArticleCount()
    this.$bus.$on('changeWidth', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style scope>
.chartCard{
    width: 100%;
    height: 100%;
}
.lineChart{
    min-width: 600px;
    height: 400px;
}
.lineChart2{
    min-width: 700px;
    height: 400px;
}
</style>
